<template>
  <div class="user-edit-container">
    <!-- Header 区域 -->
    <van-nav-bar
      title="编辑资料"
      left-arrow
      @click-left="$router.back()"
      fixed
    />

    <!-- 用户资料 -->
    <van-cell-group class="action-card">
      <van-cell title="头像" is-link center>
        <template #default>
          <van-image
            round
            class="avatar"
            :src="profile.photo"
            @click="imgUpload"
          />
          <!-- 虽然不显示 但是依旧具备唤起本地文件选择框的能力 -->
          <!-- 触发事件 一种点击鼠标  二 dom.click() -->
          <input
            type="file"
            v-show="false"
            ref="inputRef"
            @change="inputChange"
          />
        </template>
      </van-cell>
      <van-cell
        title="名称"
        is-link
        :value="profile.name"
        @click="updateName"
      />
      <van-cell
        title="生日"
        is-link
        :value="profile.birthday"
        @click="updateBirthday"
      />
    </van-cell-group>

    <!-- 准备一个Dialog组件
      1. 函数调用渲染  Dialog.alert() - 比较灵活 某个时机开发者自由控制渲染
      2. 标签渲染  <Dialog/> - 跟随vue的template一起渲染的 不够灵活 可以通过一个响应式数据的变化控制它的显示和隐藏
    -->
    <van-dialog
      v-model="showDialog"
      title="修改姓名"
      show-cancel-button
      @confirm="updateNameConfirm"
    >
      <van-field
        v-model="inputName"
        label="请输入姓名"
        placeholder="请输入用户名"
      />
    </van-dialog>

    <van-popup
      v-model="showBirthday"
      position="bottom"
      :style="{ height: '30%' }"
    >
      <van-datetime-picker
        v-model="currentDate"
        :min-date="minDate"
        type="date"
        title="选择年月日"
        @confirm="confirmUpdateBirthday"
      />
    </van-popup>
  </div>
</template>

<script>
import { getProfile, updatePhoto, updateProfile } from '@/api'
import dayjs from 'dayjs'
export default {
  name: 'UserEdit',
  data () {
    return {
      profile: {},
      showDialog: false,
      inputName: '',
      showBirthday: false,
      currentDate: new Date(),
      minDate: new Date(1800, 0, 1)
    }
  },
  mounted () {
    this.getProfile()
  },
  methods: {
    async getProfile () {
      const res = await getProfile()
      this.profile = res.data
    },
    imgUpload () {
      // 获取inputdom元素 模拟触发click方法
      this.$refs.inputRef.click()
    },
    async inputChange (e) {
      const file = e.target.files[0]
      // FormData
      const formData = new FormData()
      formData.append('photo', file)
      // 调用接口
      const res = await updatePhoto(formData)
      // json字符串  - contentType application/json
      // 上传接口 axios会自动转化 contentType multipart/form-data
      this.profile.photo = res.data.photo
    },
    updateName () {
      this.showDialog = true
      // 回填数据
      this.inputName = this.profile.name
    },
    async updateNameConfirm () {
      // 确认按钮点击之后 调用接口
      await updateProfile({ name: this.inputName })
      // 更新一下页面显示
      this.getProfile()
    },
    updateBirthday () {
      this.showBirthday = true
      this.currentDate = new Date(this.profile.birthday)
    },
    async confirmUpdateBirthday () {
      // 组件产出是一个标准的时间格式  但是后端接口要求的 YYYY-MM-DD
      const formatTime = dayjs(this.currentDate).format('YYYY-MM-DD')
      await updateProfile({ birthday: formatTime })
      this.getProfile()
      this.showBirthday = false
    }
  }
}
</script>

<style lang="less" scoped>
.user-edit-container {
  padding-top: 46px;
  .avatar {
    width: 50px;
    height: 50px;
  }
}
</style>
